Categories
TypeScript Best Practices

TypeScript Best Practices — Semicolons and Spacing

Spread the love

TypeScript is an easy to learn extension of JavaScript. It’s easy to write programs that run and does something. However, it’s hard to account for all the uses cases and write robust TypeScript code.

In this article, we’ll look at the best practices to following when writing code with TypeScript, including removing extra semicolons.

Also, we look at some spacing conventions and why we should put semicolons in our TypeScript code.

Remove Useless Semicolons

We should remove useless semicolons in our code.

For instance, instead of writing:

let x = 5;;

We write:

let x = 5;

We only need one semicolon at the end of a statement.

Replace Magic Numbers with Named Constants

If we have numbers that are used as constants repeatedly but aren’t assigned to a constant, then we should assign it to one.

This way, we can change it once and the value will be reflected everywhere.

Also, named constants tell us the meaning of the number.

Therefore, instead of writing:

enum Foo { bar = 1 }

We write:

const NUMBER_OF_BARS = 1;
enum Foo { bar = NUMBER_OF_BARS }

No Unused Expressions

We shouldn’t have unused expressions in our code.

If we have them, we should remove them.

No Unused Variables

Likewise, if we have unused variables, then we should remove them.

Don’t Use Variables Before they’re Defined

With variables that are declared with var , we can reference the variable before they’re defined, but the value will be undefined .

This is because the variable is hoisted.

let and const solve this problem since they aren’t hoisted.

Therefore, we should use let or const variables.

This way, if we reference those variables, we’ll get an error.

No Useless Constructors

We shouldn’t have useless constructors.

They include:

class A {
  constructor () {
  }
}

or:

class B extends A {
  constructor (value) {
    super(value);
  }
}

They’re both redundant so they should be removed.

Have Consistent Use of Backticks, Double Quotes or Single Quotes

We should use backticks or quotes in a consistent manner for declaring strings.

Better yet, we should use backticks since they’ll create template strings, which are more flexible.

They allow expressions to be embedded in it.

Don’t Use async if await isn’t Used Inside the Function

We should use async fucntions only is we have to await something inside it.

For instance, if we have something like:

const foo = async () => "bar";

then we should use a normal function.

Return Awaited Values Consistently

We should have return and await on the same line since the promises may not have resolved yet.

Instead, put them on separate lines.

The only exception of this is that we can put return and await on the same inside a try block to catch errors from another promised-based fucnction.

For instance, instead of writing:

async function foo() {
  return await bar();
}

We write:

async function foo() {
  const val = await bar();
  return val;
}

or:

async function foo() {
  try {
    return await bar();
  } catch (error) {}
}

Require Semicolons Instead of Automatic Semicolon Insertion

Instead of letting the Javascript interpreter put in semicolons for us, we should put them in ourselves.

Therefore, we should write:

return {
    name: "foo"
};

instead of:

return
{
    name: "foo"
};

which is the same as:

return;
{
    name: "foo"
};

Have Consistent Spacing Before Function Parenthesis

We should add consistent spacing before function parenthesis.

For instance, we usually write:

function foo(x) {
  // ...
}

in JavaScript code.

Conclusion

We should have consistent spacing in our TypeScript code for better readability.

Also, we should put in semicolons in our code instead of letting the JavaScript interpreter add them for us in unexpected places.

Duplicate semicolons should be removed.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *